import { fabric } from 'fabric';

export interface CXYPoint {
  x: number,
  y: number
}

export function useDrawFabric () {
  //绘制文字
  const drawText =  (ca: fabric.Canvas, x:number, y: number, msg: string, size: number,
    color: string) => {
    if (ca) {
      //创建文本
      let text = new fabric.Text(msg, {
        left: x,
        top: y,
        fontSize: size,
        fill: color,
        selectable: false
      });

      //加入画布
      ca.add(text);
    }
  };

  // 绘制多行文字
  const drawTextBox =  (ca: fabric.Canvas, x: number, y: number, msg: string, size: number,
    color: string, boxWidth: number) => {
    if (ca) {
      //创建文本
      let textBox = new fabric.Textbox(msg, {
        left: x,
        top: y,
        fontSize: size,
        fill: color,
        width: boxWidth,
        selectable: false
      });

      //加入画布
      ca.add(textBox);
    }
  };

  //画直线
  const drawLine = (ca: fabric.Canvas, pt0: CXYPoint, pt1: CXYPoint, color: string) => {
    if (ca) {
      let line = new fabric.Line(
        [pt0.x, pt0.y, pt1.x, pt1.y],
        {
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(line);
    }
  };

  //画折线
  const drawPolyLine = (ca: fabric.Canvas, ptArr: CXYPoint[], color: string) => {
    if (ca) {
      //折线坐标数组
      let pointArr: any[] = [];
      ptArr.forEach((item) => {
        pointArr.push(item);
      });

      //画折线
      let polyLine = new fabric.Polyline(
        pointArr,
        {
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(polyLine);
    }
  };


  //画三角形
  const drawTriangle = (ca: fabric.Canvas, w: number, h: number,
    color: string, fillColor: string) => {
    if (ca) {
      //画三角形
      let triangle = new fabric.Triangle(
        {
          width: w,
          height: h,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(triangle);
    }
  };

  // radius倒角半径
  const drawRoundRect = (ca: fabric.Canvas, w: number, h: number,
    color: string, fillColor: string, cx: number, cy: number) => {
    if (ca) {
      //画矩形
      let rect = new fabric.Rect(
        {
          width: w,
          height: h,
          rx: cx,
          ry: cy,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(rect);
      ca.centerObject(rect);
    }
  };

  //画圆,发布中心
  const drawCircle = (ca: fabric.Canvas, r: number, color: string, fillColor: string) => {
    if (ca) {
      //画圆
      let circle = new fabric.Circle(
        {
          radius: r,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(circle);
      ca.centerObject(circle);
    }
  };

  //画双圆
  const drawDoubleCircle = (ca: fabric.Canvas, r1: number, r2:number,
    color: string, fillColor: string) => {
    if (ca) {
      //画小圆
      let cMin = new fabric.Circle(
        {
          radius: r1,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //画小圆
      let cMax = new fabric.Circle(
        {
          radius: r2,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(cMin);
      ca.add(cMax);
      ca.centerObject(cMin);
      ca.centerObject(cMax);
    }
  };

  //画椭圆
  const drawEllipse = (ca: fabric.Canvas, cx: number, cy: number,
    color: string, fillColor: string) => {
    if (ca) {
      //画圆
      let ellipse = new fabric.Ellipse(
        {
          rx: cx,
          ry: cy,
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(ellipse);
      ca.centerObject(ellipse);
    }
  };

  //绘制多边形
  const drawPolygon = (ca: fabric.Canvas, ptArr: CXYPoint[],
    color: string, fillColor: string) => {
    if (ca) {
      //多边形坐标集合
      let pointArr: any[] = [];
      ptArr.forEach((item) => {
        pointArr.push(item);
      });

      //画多边形
      let polygon = new fabric.Polygon(
        pointArr,
        {
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(polygon);
      ca.centerObject(polygon);
    }
  };

  //画正边型
  const drawEqualSidesPolygon = (ca: fabric.Canvas, sides: number, radius: number,
    color: string, fillColor: string) => {
    if (ca) {
      //多边形坐标集合
      let pointArr: any[] = [];
      for (let i = 0; i < sides; i++) {
        pointArr.push({
          x: radius * Math.cos(2 * Math.PI * i / sides),
          y: radius * Math.sin(2 * Math.PI * i / sides)
        });
      }

      //画多边形
      let polygon = new fabric.Polygon(
        pointArr,
        {
          fill: fillColor,
          stroke: color,
          selectable: false
        });

      //加入画布
      ca.add(polygon);
      ca.centerObject(polygon);
    }
  }

  // 绘image图
  const drawImage = (ca: fabric.Canvas, url: string, w: number, h: number) => {
    if (ca) {
      //加载完图片后，在回调函数中需要将图片插入到画布中
      fabric.Image.fromURL(url, (img) => {
        img.width = w;
        img.height = h;
        img.selectable = false;
        ca.add(img);
        ca.centerObject(img);
      })
    }
  }

  return {
    drawText,
    drawTextBox,
    drawLine,
    drawPolyLine,

    drawTriangle,
    drawRoundRect,
    drawCircle,
    drawDoubleCircle,
    drawEllipse,
    drawPolygon,
    drawEqualSidesPolygon,
    drawImage
  };
}
